<template>
  <d2-container>
    <div class="flex-1" style="" id="printOrder">
      <div class="row-ac">
        <div class="font-s-2">订单号:{{ orderInfo.order_number }}</div>
        <div class="font-s-2 ml-5">下单时间:{{ orderInfo.created_time }}</div>
      </div>
      <div class="mt-1 flex-1">
        <el-table :data="orderInfo.items" border size="small">
          <el-table-column prop="product.product_name" label="商品名称" width="180"></el-table-column>
          <el-table-column align="center" prop="product.spec" label="规格" width="50"></el-table-column>
          <el-table-column align="center" prop="product.price" label="单价" width="40"></el-table-column>
          <el-table-column align="center" prop="quantity" label="数量" width="40"></el-table-column>
        </el-table>
      </div>
      <div class="mt-1">订单价格：{{ orderInfo.order_amount }}</div>
      <div class="row-ac font-s-1 mt-1">
        <div class="">收件人:{{ orderInfo.consignee }}</div>
        <div class="ml-3">联系电话:{{ orderInfo.phone }}</div>
        <div class="ml-3">地址:{{ orderInfo.address }}</div>
      </div>
    </div>
    <div class="flex-1 row mt-4">
      <el-button type="primary" v-print="'#printOrder'">打印预览</el-button>
    </div>
  </d2-container>
</template>

<script>
  import {
    orderDetailUrl
  } from '@/utils/order'
  export default {
    data() {
      return {
        orderInfo: ''
      }
    },
    mounted() {
      this.getOrderId = this.$route.query.orderId
      this.getOrderDetail(this.getOrderId)
    },
    methods: {
      getOrderDetail(orderId) {
        this.$get(orderDetailUrl + orderId + '/').then(res => {
          console.log(res.data.data);
          if (res.data.code == 200) {
            this.orderInfo = res.data.data
          }
        })
      }
    }
  }
</script>

<style>
  @page {
    size: A4;
    margin: 30px;
    padding: 20px;
  }
</style>
